<%@ page pageEncoding="utf-8" isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>校园超市管理系统</title>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/js/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        require.config({
            paths : {
                echarts :'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require([ 'echarts', 'echarts/chart/bar','echarts/chart/line','echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ], drewEcharts);

        function drewEcharts(ec) {
            var myCheck = ec.init(document.getElementById("main"));
            myCheck.setOption({
                title: {
                    text: '各地区供应商占比',
                    subtext: '',
                    x: 'left'
                },
                tooltip: {//提示框组件
                    trigger: 'item',//触发类型，在饼形图中为item
                    formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
                },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:(function () {
                            var arr = [];
                           $.ajax({
                                type: "post",
                                async: false, //同步执行
                                url: "${pageContext.request.contextPath}/provider/providerechart",
                                data: {},
                                dataType: "json", //返回数据形式为json
                               statusCode: {
                                   403: function() {

                                   }
                               },
                                success: function (result) {
                                    for (var i = 0; i < result.data.proAddress.length; i++) {
                                        arr.push(result.data.proAddress[i]);
                                    }
                                },
                            });
                            return arr;
                        })(),
                },
                series : [
                    {
                        name: '供应商占比',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        center: ['50%', '60%'],
                        data:(function () {
                            var atr = [];
                            $.ajax({
                                type: "post",
                                async: false, //同步执行
                                url: "${pageContext.request.contextPath}/provider/providerechart",
                                data: {},
                                dataType: "json", //返回数据形式为json
                                statusCode: {
                                    403: function() {
                                        alert("无权访问！")
                                    }
                                },
                                success: function (result) {
                                    for (var i = 0; i < result.data.count.length; i++) {
                                        atr.push(result.data.count[i]);
                                    }
                                },
                            });
                            /*alert(atr)*/
                            return atr;
                        })(),
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        }
    </script>
</head>
<body>
<div id="main" style="width: 1550px;height:700px;"></div>
</body>
</html>